import {Form, Select} from 'antd'
import {concat, omit} from 'ramda'
import Group from './Group'
import {compose, withState} from 'recompose'

const FormItem = Form.Item;

const Option = Select.Option;


const _AntSelect = ({model, state: {id}, onSelect, defaultValue,allowClear, style, placeholder, options = [], onChange, width}) => (
    <div id={id}>
        <Select mode={model}
                defaultValue={defaultValue}
                onSelect={onSelect}
                placeholder={placeholder}
                getPopupContainer={() => document.getElementById(id)}
                onChange={onChange}
                allowClear={allowClear || false}
                style={{...(style || {}), width: width || '100%'}}
        >
            {options.map(({value, displayValue}) => (
                <Option key={value} value={value + ''}>{displayValue + ''}</Option>))}
        </Select>
    </div>
)

const AntSelect = compose(
    withState('state', 'setState', {
        id: Math.random().toString()
    })
)(_AntSelect)

// type FormSelectPropsType = {
//     options: Array<{ value: string | number, displayValue: string | number }>,
//     initialValue: string | number,
//     getFieldDecorator: Function,
//     required?: boolean,
//     placeholder?: string,
//     labelCol?: number,
//     span?: number,
//     textAlign?: 'riught' | 'cxenter' | 'left',
//     label?: string,
//     name: string,
//     justify?: string,
//     rules?: Array<{ validator: Function }>,
//     model?: 'multiple' | 'tags' | 'combobox'
// }


const FormSelect = ({model, rules, mode, textAlign, onSelect, span, justify, placeholder, name, label, labelCol, required, options, initialValue, getFieldDecorator}) => (
    <Group spans={[span || 16]} justify={justify || 'center'} textAligns={[textAlign || 'left']}>
        <FormItem labelCol={{span: labelCol || 0}} wrapperCol={{span: 24 - (labelCol || 0)}} label={label}>
            {getFieldDecorator(name, {
                initialValue,
                rules: concat([{required, message: '必填项'}], rules || []),
            })(
                <Select onSelect={onSelect} mode={model || mode} placeholder={placeholder} style={{width: '100%'}}>
                    {options.map(({value, displayValue}) => (<Option value={value + ''}>{displayValue + ''}</Option>))}
                </Select>
            )}
        </FormItem>
    </Group>
)

export {FormSelect, AntSelect}